---
id: 63db7f4677d06d7500a13321
title: الخطوة 1
challengeType: 0
dashedName: step-1
---

# --description--

In this project, you'll build a decimal and binary converter and learn about both number systems. You'll also learn about recursion by using it to perform the conversions.

All of the HTML and CSS for this project has been provided for you.

When you're ready to get started, use the `.getElementById()` method to get the input element with the id `number-input`, and store it in a variable called `numberInput`. Use the same method to get the button element with the id `convert-btn` and store it in a variable called `convertBtn`, and the `h2` element with the id `result` and store it in a variable called `result`.

# --hints--

You should use the `document.getElementById()` method to get the `#number-input` element.

```js
assert.match(code, /document\.getElementById\(\s*('|"|`)number-input\1\s*\)/);
```

You should use `const` to declare a variable called `numberInput` and assign it the `#number-input` element.

```js
assert.match(code, /const\s+numberInput\s*=\s*document\.getElementById\(\s*('|"|`)number-input\1\s*\)/);
```

You should use the `document.getElementById()` method to get the `#convert-btn` element.

```js
assert.match(code, /document\.getElementById\(\s*('|"|`)convert-btn\1\s*\)/);
```

You should use `const` to declare a variable called `convertBtn` and assign it the `#convert-btn` element.

```js
assert.match(code, /const\s+convertBtn\s*=\s*document\.getElementById\(\s*('|"|`)convert-btn\1\s*\)/);
```

You should use the `document.getElementById()` method to get the `#result` element.

```js
assert.match(code, /document\.getElementById\(\s*('|"|`)result\1\s*\)/);
```

You should use `const` to declare a variable called `result` and assign it the `#result` element.

```js
assert.match(code, /const\s+result\s*=\s*document\.getElementById\(\s*('|"|`)result\1\s*\)/);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Decimal to Binary Converter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Decimal to Binary Converter</h1>
    <div class="input-container">
      <label for="number-input">Enter a decimal number:</label>
      <input
        value=""
        type="number"
        name="decimal number input"
        id="number-input"
        class="number-input"
      />
      <button class="convert-btn" id="convert-btn">Convert</button>
    </div>
    <output id="result" for="number-input"></output>
    <div id="animation-container"></div>
    <script src="script.js"></script>
  </body>
</html>
```

```css
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --light-grey: #f5f6f7;
  --dark-blue: #1b1b32;
  --orange: #f1be32;
}

body {
  background-color: var(--dark-blue);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  color: var(--light-grey);
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
  font-size: 2.3rem;
  margin: 20px 0;
}

.input-container {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.convert-btn {
  background-color: var(--orange);
  cursor: pointer;
  border: none;
  padding: 4px;
}

.number-input {
  height: 25px;
}

#result {
  margin: 10px 0;
  min-width: 200px;
  width: fit-content;
  min-height: 80px;
  word-break: break-word;
  padding: 15px;
  border: 5px solid var(--orange);
  font-size: 2rem;
  text-align: center;
}

#animation-container {
  margin: auto;
  max-width: 300px;
}

.animation-frame {
  margin: 250px auto 0;
  padding: 15px 10px;
  border: 5px solid var(--orange);
  font-size: 1.2rem;
  text-align: center;
}

@media screen and (min-width: 500px) {
  .input-container {
    flex-direction: row;
  }

  #result {
    max-width: 460px;
  }
}
```

```js
--fcc-editable-region--

--fcc-editable-region--
```
